<template>
  <div class="detail">
    <van-nav-bar
      fixed
      left-arrow
      title="商品详情"
      @click-left="$router.back()"
    />
    <!--轮播图-->
    <van-swipe :autoplay="3000" @change="onChange">
      <van-swipe-item v-for="(item, index) in list.goods_images" :key="index">
        <img :src="item.external_url" alt="" />
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator">{{ index + 1 }} / {{ imgLength }}</div>
      </template>
    </van-swipe>
    <!--商品说明-->
    <div class="illustrate">
      <div class="ill-box">
        <div class="title">
          <div class="price">
            <span class="new">￥{{ list.goods_price_min }}</span>
            <span class="old">￥{{ list.line_price_max }}</span>
          </div>
          <div class="sale">已售{{ list.goods_sales }}件</div>
        </div>

        <div class="text-ellipsis-2">
          {{ list.goods_name }}
        </div>

        <div class="service">
          <div class="left-words">
            <span>
              <van-icon color="#fa2248" name="passed" />
              七天无理由退货
            </span>
            <span>
              <van-icon color="#fa2248" name="passed" />
              48小时发货
            </span>
          </div>
        </div>
        <!--商品评价-->
        <div class="appraise">
          <div class="head">
            <div class="h-left">商品评价（{{ total }}条）</div>
            <div class="h-right" @click="goPingLun">
              查看更多
              <van-icon name="arrow" />
            </div>
          </div>
          <div v-for="(item, index) in comment" :key="index">
            <div class="middle">
              <img :src="item.user.avatar_url || defaultImg" alt="" />
              <div class="name">{{ item.user.nick_name }}</div>
              <van-rate
                :size="25"
                :value="item.score / 2"
                color="#ffd21e"
                void-color="#eee"
                void-icon="star"
              />
            </div>
            <div class="foot">
              <div class="app">{{ item.content }}</div>
              <div class="time">{{ item.create_time }}</div>
            </div>
          </div>
        </div>
      </div>
      <!--商品描述-->
      <div class="description">
        <div class="desc">
          <div class="tips">商品描述</div>
          <div class="desc" v-html="list.content"></div>
        </div>
      </div>
    </div>
    <div class="shoppingCart">
      <!--购物车-->
      <van-goods-action>
        <van-goods-action-icon icon="home-o" text="首页" url="/home" />
        <van-goods-action-icon
          :badge="cartTotal"
          icon="cart-o"
          text="购物车"
          @click="$router.push('/cart')"
        />
        <van-goods-action-button
          color="linear-gradient(to right, #ffa800, #ffba00)"
          text="加入购物车"
          type="warning"
          @click="addFn"
        />
        <van-goods-action-button
          color="linear-gradient(to right, #f9231d, #ff6034)"
          text="立即购买"
          type="danger"
          @click="buyFn"
        />
      </van-goods-action>
      <!--加入购物车弹层-->
      <van-action-sheet
        v-model="showPanner"
        :title="mode === 'cart' ? '加入购物车' : '立刻购买'"
      >
        <div class="product">
          <div class="product-title">
            <div class="left">
              <img :src="list.goods_image" alt="" />
            </div>
            <div class="right">
              <div class="price">
                <span>¥</span>
                <span class="nowprice">{{ list.goods_price_min }}</span>
              </div>
              <div class="count">
                <span>库存</span>
                <span>{{ list.stock_total }}</span>
              </div>
            </div>
          </div>
          <div class="num-box">
            <span>数量</span>
            <CountBox v-model="addCount"></CountBox>
          </div>
          <!--有库存显示提交按钮-->
          <div v-if="list.stock_total" class="showbtn">
            <div v-if="mode === 'cart'" class="btn" @click="addCart">
              加入购物车
            </div>
            <div v-else class="btn now">立刻购买</div>
          </div>
          <div v-else class="btn-none">该商品已抢完</div>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>
<script>
import { getComment, getDetail } from '@/api/detail'
import defaultImg from '@/assets/yishu.jpg'
import CountBox from '@/components/CountBox.vue'
import { getCart, getCartTotal } from '@/api/cart'

export default {
  name: 'detailCom',
  components: { CountBox },
  data () {
    return {
      goodsId: this.$route.params.goodsId,
      index: 0,
      list: {},
      comment: [],
      imgLength: 0,
      total: 0,
      defaultImg,
      showPanner: false,
      mode: 'cart',
      addCount: 1, // 绑定输入框
      cartTotal: 0 // 购物车角标
    }
  },
  computed: {},
  methods: {
    goPingLun () {
      this.$router.push({
        path: '/ProductReviews',
        query: {
          goodsId: this.goodsId
        }
      })
    },
    async addCart () {
      // 判断token是否存在
      if (!this.$store.getters.token) {
        // 弹确认框
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: '此页面需要先登录才能继续进行操作',
            confirmButtonText: '去登录',
            cancelButtonText: '再逛逛'
          })
          .then(() => {
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
        return
      }
      const { data } = await getCart(
        this.goodsId,
        this.addCount,
        this.list.skuList[0].goods_sku_id
      )
      this.cartTotal = data.data.cartTotal
      this.$toast(data.message)
      this.showPanner = false
    },
    onChange (index) {
      this.index = index
    },
    addFn () {
      this.mode = 'cart'
      this.showPanner = true
    },
    buyFn () {
      this.mode = 'buy'
      this.showPanner = true
    }
  },
  async created () {
    const {
      data: { data }
    } = await getCartTotal()
    this.cartTotal = data.cartTotal
    const {
      data: {
        data: { detail }
      }
    } = await getDetail(this.goodsId)
    this.imgLength = detail.goods_images.length
    this.list = detail
    const {
      data: {
        data: { list, total }
      }
    } = await getComment(this.goodsId, 3)
    this.comment = list
    this.total = total
  }
}
</script>
<style lang="less" scoped>
.detail {
  width: 100vw;

  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-swipe {
    margin-top: 52px;
    background-color: #fcfcfc;

    img {
      width: 100%;
    }

    .custom-indicator {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 5px 10px;
      font-size: 12px;
      color: white;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 15px;
    }
  }

  //商品
  .illustrate {
    padding-top: 20px;

    //商品描述
    .description {
      .desc {
        width: 99%;
        margin: 0 auto;
        overflow: scroll;

        .tips {
          font-size: 16px;
          margin: 10px 0;
          padding-left: 20px;
        }

        ::v-deep img {
          display: block;
          width: 100% !important;
        }
      }
    }

    .ill-box {
      width: 90%;
      margin: 0 auto;
      //商品评价
      .appraise {
        .head {
          font-size: 18px;
          display: flex;
          justify-content: space-between;

          .h-right {
            color: #9a989b;
          }
        }

        .middle {
          margin: 15px 0;
          display: flex;
          align-items: center;

          img {
            width: 40px;
            height: 40px;
          }

          .name {
            margin: 0 15px;
          }
        }

        .foot {
          margin: 10px 0;
          font-size: 15px;

          .app {
            margin: 10px 0;
          }

          .time {
            color: #a8a8a8;
          }
        }
      }

      .title {
        display: flex;
        justify-content: space-between;

        .price {
          .new {
            color: #fa2209;
            font-size: 22px;
          }

          .old {
            font-size: 18px;
            text-decoration: line-through;
            color: #959595;
          }
        }

        .sale {
          color: #959595;
          font-size: 16px;
          position: relative;
          top: 4px;
        }
      }

      .text-ellipsis-2 {
        margin: 10px 0;
        font-size: 18px;
      }

      .service {
        margin: 10px -20px;
        display: flex;
        justify-content: space-between;
        background-color: #fafafa;
        line-height: 40px;
        width: 120%;
        padding-left: 20px;

        .left-words {
          font-size: 16px;
        }
      }
    }
  }

  //购物车
  .shoppingCart {
    .van-goods-action {
      width: 95%;
      margin: 0 auto;
      padding-right: 20px;

      .child {
        width: 40px;
        height: 40px;
        background: #f2f3f5;
        border-radius: 4px;
      }
    }

    //购物车弹层
    .van-popup {
      width: 94%;
      margin: 0 auto;
    }

    .product {
      .product-title {
        display: flex;

        .left {
          img {
            width: 90px;
            height: 90px;
          }

          margin: 10px;
        }

        .right {
          flex: 1;
          padding: 10px;

          .price {
            font-size: 14px;
            color: #fe560a;

            .nowprice {
              font-size: 24px;
              margin: 0 5px;
            }
          }
        }
      }

      .num-box {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        align-items: center;
      }

      .btn,
      .btn-none {
        height: 40px;
        line-height: 40px;
        margin: 20px;
        border-radius: 20px;
        text-align: center;
        color: rgb(255, 255, 255);
        background-color: rgb(255, 148, 2);
      }

      .btn.now {
        background-color: #fe5630;
      }

      .btn-none {
        background-color: #cccccc;
      }
    }
  }
}
</style>
